<template>

  <!--
      为什么要封装组件？
      结果是相似的可以复用 标题 title （纯文本 string 可变的） + 主要内容区域 main （模版 可变的）

      封装方案
      纯展示类的封装
      1.先不要考虑变化的部分 先写一个纯静态的解构 保证哟哟title 和main 两块区域
      2.考虑变化的部分 变化的部分由父组件通过参数传给我 我负责显示
        1.父传子 props 传递是纯js数据 对象 数组 布尔值....[title]
        2.插槽 传递的是 HTML 结构模版 [主要内容区域 main]

    思想：
    一个组件本质上就是一个函数 可以把props / 插槽理解为函数的形参
    定义好组件之后 然后在父组件中传递参数其实就是一个传递实参的过程

    props 参数的传递 如果这个参数是字符串类型 不用加冒号
    如果传递的参数是一个需要变动的数据 才加上冒号来识别表达式 data computed

    所有的三方组件库 都是把形参封装好了 然后我们在业务中用的时候传递各种各种的实参
     -->
  <div class="info-wrapper">
    <!-- 标题区域 -->
    <p class="info-wrapper__title">{{ title }}</p>
    <div>
      <!-- 主要内容区域 -->
      <slot />
    </div>
  </div>

</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.info-wrapper {
    background-color: #ffffff;
    padding: 20px;
    margin-bottom: 20px;
    min-width: 260px;
    &__title {
      font-size: 14px;
      color: #303035;
      font-weight: 500;
      margin-bottom: 20px;
    }
  }
</style>
